<template>
  <div class="edit-pane">
    <div class="mat-title-pane">
      <label>标题：</label
      ><el-input
        size="large"
        class="mat-title"
        v-model="mat.title"
        placeholder="请输入标题"
      ></el-input>
    </div>
    <div class="mat-authors-pane">
      <label>作者：</label>
      <span>
        <multiselect
          v-model="mat.authors"
          label="fullname"
          track-by="id"
          :options="authorOptions"
          :searchable="true"
          :close-on-select="false"
          :show-labels="false"
          :multiple="true"
          :taggable="true"
          @tag="addAuthor"
          @search-change="searchAuthor"
          placeholder="选择或新建作者"
        ></multiselect>
      </span>
    </div>
    <div class="mat-tags-pane">
      <label>标签：</label>
      <tag
        v-for="tag in mat.tags"
        :key="tag.val"
        :tag="tag"
        @click="tagClicked(tag)"
      ></tag>
      <div class="tag-wrap edit" @click="editTags">
        <div class="neo-stat-icon">
          <ri i="edit" @click="editTags"></ri>
          编辑标签
        </div>
      </div>
      <edit-tags
        :tags="mat.tags"
        :kind="kind"
        :mat="mat"
        :visible.sync="tagsDialogVisible"
      ></edit-tags>
    </div>
    <div class="write-editor-pane">
      <mavon-editor
        id="write-mavon-editor"
        v-model="mat.content"
        placeholder="请输入文章内容..."
        :boxShadow="false"
      ></mavon-editor>
      <y-editor v-show="false"></y-editor>
      <br />
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel()">取消</el-button>
    </div>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";
import Tag from "./Tag.vue";
import EditTags from "./EditTags.vue";
import YEditor from "@/tools/YEditor.vue";
import { MatFormat, MatKind, TagCat } from "@js/constants.js";

export default {
  props: ["kind"],
  components: {
    Multiselect,
    // TagSelect,
    EditTags,
    Tag,
    YEditor,
  },
  data() {
    return {
      TagCat: TagCat,
      MatKind: MatKind,
      mat: {
        id: this.$route.params.mid,
        title: "",
        content: "",
        authors: [],
        tags: [],
      },
      mid: this.$route.params.mid,
      authorOptions: [],
      isAuthorDialogVisible: false,
      newAuthor: "",
      tagsDialogVisible: false,
    };
  },
  computed: {
    isEdit() {
      return !!this.mid;
    },
    matKindName() {
      if (this.kind == MatKind.Book) {
        return "书籍";
      } else {
        return "素材";
      }
    },
  },
  created() {
    console.log("kind: ", this.kind);
    if (this.isEdit) {
      if (this.$route.meta.isresource) {
        // 获取诗歌内容
        this.authGet("/api/v1/mats/resources/get/" + this.mid).then((res) => {
          let mat = res.data;
          if (!mat.tags) mat.tags = [];
          this.mat = mat;
          this.mid = "";
        });
      } else {
        // 获取诗歌内容
        this.authGet("/api/v1/mats/get/" + this.mid).then((res) => {
          let mat = res.data;
          if (!mat.tags) mat.tags = [];
          this.mat = mat;
        });
      }
    }
    // fetch authors
    this.$axios.get("/api/v1/people/list").then((res) => {
      this.authorOptions = res.data;
    });
  },
  methods: {
    save() {
      if (!this.mat.title) {
        this.$alert("标题未填写", "注意：");
      } else if (!this.mat.content) {
        this.$alert("内容未填写", "注意：");
      } else {
        let url = this.isEdit ? "/api/v1/mats/modify" : "/api/v1/mats/add";
        let data = {
          id: this.mat.id,
          title: this.mat.title,
          format: this.mat.format || MatFormat.Markdown,
          content: this.mat.content,
          source: this.mat.source,
          intro: this.mat.intro,
          tags: this.mat.tags,
          pids: this.packAuthors(),
        };

        // 素材类型，默认为文章
        let kind = this.$route.query.kind;
        if (kind) {
          data.kind = Number(kind);
        } else {
          data.kind = MatKind.Article;
        }

        this.authPost(url, data)
          .then(() => {
            this.$message("素材保存成功");
            this.goBack();
          })
          .catch((error) => {
            this.$message("素材保存失败：" + error);
          });
      }
    },
    editTags() {
      this.tagsDialogVisible = true;
    },
    tagClicked() {},
    cancel() {
      if (this.title || this.content) {
        this.$confirm("素材未保存，确认退出？")
          .then(() => {
            this.$emit("cancel");
          })
          .catch(() => {});
      } else {
        this.$emit("cancel");
      }
    },
    addAuthor(author) {
      this.newAuthor = author;
      this.isAuthorDialogVisible = true;
    },
    authorAdded(author) {
      this.isAuthorDialogVisible = false;
      this.authorOptions.push(author);
      this.authors.push(author);
    },
    searchAuthor(name) {
      console.log("searching for author:", name);
    },
    packAuthors() {
      return this.mat.authors.map((a) => a.id).join(",");
    },
  },
};
</script>


<style lang="stylus">
.edit-pane
  text-align left
  padding 0

  .mat-title-pane
    margin-bottom 2vh

    .mat-title
      width 90%

    input
      font-weight bold
      font-size 1.5em

  .mat-authors-pane
    margin-bottom 4vh

    label
      line-height 30px
      height 30px

    .multiselect
      display inline-block
      width 80%

    .authors-col
      vertical-align middle

    .tags-col
      vertical-align middle

      .tag-wrap
        margin-right 0.4vw

  .mat-tags-pane
    margin-bottom 2vh

#write-mavon-editor
  z-index 20

</style>